<style lang="scss" scoped>
.content{
    padding: 5px 3%;
    height: calc(100vh - 46px);
    background-image: linear-gradient(to bottom, rgb(50, 134, 255), rgb(130, 13, 169));
    color: #fff;
    .title{
        display: flex;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        border-bottom: 1px solid #fff;
        .label{
            width: 100px;
        }
        .radiogroup{
            padding-top: 10px;
        }
    }
    .d_title{
        height: 35px;
        line-height: 35px;
    }
    .d_detail{
        padding-top: 8px;
        position: relative;
        textarea{
            width: 80%;
            margin-left: 10%;
            height: 150px;
            border-radius: 7px;
            background-color: rgba(0,0,0,0);
            border: 1px solid #fff;
            color: #fff;
            padding: 5px;
            &::-webkit-input-placeholder{
                // 改变placeholder的文本样式
                color: #eee;
            }
        }
        span{
            position: absolute;
            bottom: 15px;
            right: 35px;
        }
    }
}
</style>
<template>
    <div class="suggest">
        <navigator 
            :back="true" 
            :title="'意见建议'"
            :btnShow="true"
            :btnText="'提交'"
            @click="submit"
            />
        <div class="content">
            <div class="title">
                <div class="label">
                    类型：
                </div>
                <div class="radiogroup">
                    <van-radio-group v-model="objPage.type"
                    
                        direction="horizontal">
                        <van-radio 
                            :checked-color="'blueviolet'"
                            name="0">建议</van-radio>
                        <van-radio
                        :checked-color="'red'"
                        name="1">投诉</van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="desc">
                <div class="d_title">
                    留言内容:
                </div>
                <div class="d_detail">
                    <textarea v-model="objPage.value" placeholder="请输入留言内容"></textarea>
                    <span>
                        {{objPage.value.length}}/200
                    </span>
                </div>
            </div>
        </div>
        <!-- <navigator :back="true" >
            意见建议
        </navigator> -->
    </div>
</template>
<script>
import navigator from '@/components/navigator.vue';
// 导入 意见建议接口
import {
    advise
} from '@/api'
export default {
    methods: {
        submit(){
            // 长度是否足够
            if(this.objPage.value.length < 10){
                this.$toast('留言的内容最少十个字符');
                return
            }
            // 提交建议
            advise(this.objPage).then(res => {
                if(res.data.code == 1){
                    // 
                    this.$toast('感谢您的反馈，我们会做的更好~')
                    // 返回前一个页面
                    setTimeout(() => {
                        this.$router.back()
                    }, 800);
                }else{
                    this.$toast(res.data.msg)
                }
            })
        }
    },
    data() {
        return {
            objPage :{
                type: '0',
                value: ''
            }
        }
    },
    watch: {
        'objPage.value'(n){
            // 不能让value超过200个字符长度
            this.objPage.value = n.substr(0,200);
        }
    },
    components: {
        navigator
    }
}
</script>